<template>
  <div class="box">
        <div class="datu">
            <img src="/static/imgs_s01/s01_banner.png" alt="">
        </div>
        <div class="dian">
            <div class="kongbai"></div>
            <div class="xx">
                <span class="sp1">汇方圆</span>
                <span class="sp2">营业中</span>
                <ul>
                    <li class="li1">WIFI</li>
                    <li class="li2">停车位</li>
                    <li class="li3">包间</li>
                    <li class="li4">餐巾纸</li>
                </ul>
                <p class="p1">骑士配送·30分钟送达</p>
                <p class="p2">全心全意提供优质的服务，我们一直在努力！</p>
            </div>
        </div>
        <div class="dizhi">
            <img class="ding" src="/static/imgs_s01/s01_position.png" alt="">
            <p>河南省郑州市金水区中州大道农业路苏荷中心1926</p>
            <img class="dao" src="/static/imgs_s01/s01_daohang.png" alt="">
            <img class="phone" src="/static/imgs_s01/s01_phone.png" alt="">
        </div>

        <div class="fuwu">
            <div @click="goTangShiDianCan">
                <img src="/static/imgs_s01/s01_tangshi.png" alt="">
                <p class="fu1">堂食点餐</p>
                <p class="fu2">到店轻松点餐</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_wimai.png" alt="">
                <p class="fu1">外卖</p>
                <p class="fu2">轻松一点 轻松就餐</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_yuyue.png" alt="">
                <p class="fu1">预约自提</p>
                <p class="fu2">不用排队 到店即取</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_youhui.png" alt="">
                <p class="fu1">优惠</p>
                <p class="fu2">点这里 点这里</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_bawangcan.png" alt="">
                <p class="fu1">霸王餐</p>
                <p class="fu2">品质优选</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_order.png" alt="">
                <p class="fu1">订单</p>
                <p class="fu2">订单 一目了然</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_pay.png" alt="">
                <p class="fu1">买单支付</p>
                <p class="fu2">在线支付 买单快捷</p>
            </div>
        </div>

        <div class="tuijian">
            <div class="jian">
                <img src="/static/imgs_s01/s01_tuijain.png" alt="">
                <span>店长推荐 (8)</span>
            </div>
            <div class="tui">
                <div>
                    <img src="/static/imgs_s01/s01_food1.png" alt="">
                    <p>内蒙古羊肉串</p>
                    <span>￥58.00起</span>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_food2.png" alt="">
                    <p>长沙臭豆腐</p>
                    <span>￥6.90起</span>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_food3.png" alt="">
                    <p>关东煮</p>
                    <span>￥9.90起</span>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_food4.png" alt="">
                    <p>沙朗牛排套餐</p>
                    <span>￥50.00起</span>
                </div>
            </div>
        </div>
        <div class="pingjia">
            <img src="/static/imgs_s01/s01_pingjia.png" alt="">
            <span>用户评价 (999+)</span>
            <div class="ping">
                <span class="pi">商家好评率</span>
                <span class="ng">100.00%</span>
            </div>
            <div class="jia">
                <div>
                    <img src="/static/imgs_s01/s01_buman.png" alt="">
                    <p>不满 0</p>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_yiban.png" alt="">
                    <p>一般 0</p>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_happy.png" alt="">
                    <p>满意 50</p>
                </div>
                <div>
                    <img src="/static/imgs_s01/s01_chaozan.png" alt="">
                    <p>超赞 100</p>
                </div>
            </div>
        </div>
        <div class="yonghu">
            <img class="imgs1" src="/static/imgs_s01/s01_photo.png" alt="">
            <span class="span1">繁华依旧</span>
            <img class="imgs2" src="/static/imgs_s01/s01_chaozan.png" alt="">
            <span class="span2">超赞</span>
            <p>味道很好，值得品尝，用餐环境很棒，超赞！！</p>
            <img class="imgs3" src="/static/imgs_s01/s01_dian1.png" alt="">
            <img class="imgs4" src="/static/imgs_s01/s01_dian2.png" alt="">
            <img class="imgs5" src="/static/imgs_s01/s01_dian3.png" alt="">
            <div>
                <span class="tang">堂食</span>
                <span class="riqi">2019-08-20 17:26:18</span>
            </div>
        </div>
        <div class="yonghu2">
            <img class="imgs1" src="/static/imgs_s01/s01_photo1.png" alt="">
            <span class="span1">久颜丶</span>
            <img class="imgs2" src="/static/imgs_s01/s01_chaozan.png" alt="">
            <span class="span2">超赞</span>
            <p>味道很好，值得品尝，用餐环境很棒，超赞！！</p>
            <img class="imgs3" src="/static/imgs_s01/s01_dian1.png" alt="">
            <img class="imgs4" src="/static/imgs_s01/s01_dian2.png" alt="">
            <img class="imgs5" src="/static/imgs_s01/s01_dian3.png" alt="">
            <div>
                <span class="tang">外卖</span>
                <span class="riqi">2019-08-20 17:26:18</span>
            </div>
            <div class="duo">
                <p>查看全部评价</p>
                <img src="/static/imgs_s01/s01_gengduo.png" alt="">
            </div>
        </div>
        <div class="foot">
            <img src="/static/imgs_s01/s01_banner.png" alt="">
            <p>汇方圆科技</p>
            <div>定制、代理点这里！</div>
        </div>

        <!-- <div class="dibu">
            <div>
                <img src="/static/imgs_s01/s01_index1.png" alt="">
                <p class="green">首页</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_gouwuche0.png" alt="">
                <p>购物车</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_geren0.png" alt="">
                <p>个人中心</p>
            </div>
        </div> -->
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   goTangShiDianCan() {
       console.log("test");
       wx.navigateTo({url: '/pages/s10_order01/main'})       
   }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>

        .box {
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: #F0F2F5;
        }

        .datu {
            width: 100%;
            height: 136px;
        }

        .datu img {
            width: 100%;
            height: 136px;
        }

        .dian {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 122px;
            background-color: white;
        }

        .dian .kongbai {
            width: 91px;
            height: 91px;
            background: rgba(226, 226, 226, 1);
            border-radius: 6px;
            margin-left: 8px;
            margin-top: 11px;
        }

        .dian .xx .sp1 {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            margin-left: 9px;
            margin-top: 15px;
        }

        .dian .xx .sp2 {
            display: inline-block;
            width: 45px;
            height: 16px;
            margin-top: 15px;
            margin-left: 9px;
            line-height: 16px;
            text-align: center;
            background: rgba(50, 177, 108, 1);
            border-radius: 8px;
            font-size: 10px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .dian ul {
            display: flex;
            flex-direction: row;
            margin-top: 9px;
        }

        .dian ul .li1 {
            width: 33px;
            height: 16px;
            margin-left: 9px;
            margin-right: 3px;
            line-height: 16px;
            text-align: center;
            border: 1px solid rgba(54, 153, 255, 1);
            border-radius: 8px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(54, 153, 255, 1);
        }

        .dian ul .li2 {
            width: 42px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border: 1px solid rgba(241, 145, 73, 1);
            border-radius: 8px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(241, 145, 73, 1);
        }

        .dian ul .li3 {
            width: 33px;
            height: 16px;
            margin-left: 3px;
            margin-right: 3px;
            line-height: 16px;
            text-align: center;
            border: 1px solid rgba(246, 83, 88, 1);
            border-radius: 8px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(246, 83, 88, 1);
        }

        .dian ul .li4 {
            width: 42px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border: 1px solid rgba(174, 93, 161, 1);
            border-radius: 8px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(174, 93, 161, 1);
        }

        .dian .p1 {
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            margin-left: 9px;
            margin-top: 8px;
            color: rgba(102, 102, 102, 1);
        }

        .dian .p2 {
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            margin-left: 9px;
            margin-top: 5px;
            color: rgba(102, 102, 102, 1);
        }

        .dizhi {
            display: flex;
            flex-direction: row;
            height: 39px;
            background-color: white;
        }

        .dizhi .ding {
            width: 18px;
            height: 18px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .dizhi p {
            width: 202px;
            height: 27px;
            font-size: 13px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-left: 5px;
        }

        .dizhi .dao {
            width: 16px;
            height: 16px;
            margin-left: 46px;
            margin-top: 3px;
        }

        .dizhi .phone {
            width: 16px;
            height: 16px;
            margin-left: 43px;
            margin-top: 3px;
        }

        .fuwu {
            width: 100%;
            height: 352px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: white;
            margin-top: 9px;
        }

        .fuwu div {
            position: relative;
            width: 50%;
            height: 88px;
        }

        .fuwu img {
            position: absolute;
            width: 51px;
            height: 51px;
            left: 8px;
            top: 20px;
        }

        .fuwu .fu1 {
            position: absolute;
            top: 23px;
            left: 66px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 32px;
        }

        .fuwu .fu2 {
            position: absolute;
            left: 66px;
            top: 47px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(73, 73, 73, 1);
            line-height: 32px;
        }

        .tuijian {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 193px;
            margin-top: 10px;
            background-color: white;
        }

        .tuijian .jian {
            height: 57px;
        }

        .tuijian .jian img {
            width: 20px;
            height: 20px;
            margin-top: 18px;
            margin-left: 11px;
        }

        .tuijian .jian span {
            margin-top: 22px;
            margin-left: 5px;
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        .tuijian .tui {
            display: flex;
            flex-direction: row;
            height: 166px;
        }

        .tuijian .tui div {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            text-align: center;
        }

        .tuijian .tui img {
            width: 80px;
            height: 80px;
        }

        .tuijian .tui p {
            margin-top: 11px;
            margin-bottom: 8px;
            font-size: 12px;
            font-family: PingFang;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        .tuijian .tui span {
            font-size: 11px;
            font-family: PingFang;
            font-weight: bold;
            color: rgba(247, 83, 88, 1);
        }

        .pingjia {
            height: 183px;
            margin-top: 9px;
            background-color: white;
        }

        .pingjia>img {
            width: 20px;
            height: 20px;
            margin-top: 19px;
            margin-left: 11px;
        }

        .pingjia>span {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            margin-top: 21px;
            margin-left: 5px;
            color: rgba(51, 51, 51, 1);
        }

        .pingjia .ping {
            padding-top: 23px;
            height: 47px;
        }

        .pingjia .ping .pi {
            margin-left: 112px;
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .pingjia .ping .ng {
            margin-left: 14px;
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(241, 73, 73, 1);
        }

        .pingjia .jia {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .pingjia .jia img {
            width: 28px;
            height: 28px;
        }

        .pingjia .jia p {
            margin-top: 9px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .yonghu {
            width: 100%;
            height: 225px;
            background-color: white;
        }

        .yonghu .imgs1 {
            width: 24px;
            height: 24px;
            margin-top: 14px;
            margin-left: 16px;
        }

        .yonghu .span1 {
            margin-top: 21px;
            margin-left: 3px;
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .yonghu .imgs2 {
            width: 13px;
            height: 13px;
            margin-top: 18px;
            margin-left: 225px;
        }

        .yonghu .span2 {
            margin-top: 20px;
            margin-left: 3px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .yonghu p {
            margin-top: 13px;
            margin-left: 13px;
            font-size: 13px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .imgs3,
        .imgs4,
        .imgs5 {
            width: 100px;
            height: 100px;
            margin-top: 14px;
            margin-left: 18px;
        }

        .yonghu div .tang {
            display: inline-block;
            width: 34px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            margin-top: 19px;
            margin-left: 24px;
            background: rgba(174, 91, 159, 1);
            border-radius: 3px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .yonghu div .riqi {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
            margin-top: 20px;
            margin-left: 170px;
        }

        .yonghu2 {
            width: 100%;
            height: 275px;
            background-color: white;
        }

        .yonghu2 .imgs1 {
            width: 24px;
            height: 24px;
            margin-top: 14px;
            margin-left: 16px;
        }

        .yonghu2 .span1 {
            margin-top: 21px;
            margin-left: 3px;
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .yonghu2 .imgs2 {
            width: 13px;
            height: 13px;
            margin-top: 18px;
            margin-left: 225px;
        }

        .yonghu2 .span2 {
            margin-top: 20px;
            margin-left: 3px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .yonghu2>p {
            margin-top: 13px;
            margin-left: 13px;
            font-size: 13px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .imgs3,
        .imgs4,
        .imgs5 {
            width: 100px;
            height: 100px;
            margin-top: 14px;
            margin-left: 18px;
        }

        .yonghu2 div .tang {
            display: inline-block;
            width: 34px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            margin-top: 19px;
            margin-left: 24px;
            background: rgba(241, 145, 73, 1);
            border-radius: 3px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .yonghu2 div .riqi {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
            margin-top: 20px;
            margin-left: 170px;
        }

        .yonghu2 .duo {
            position: relative;
            margin-top: 19px;
            margin-left: 139px;
            width: 97px;
            height: 21px;
            border: 1px solid rgba(93, 93, 93, 1);
            opacity: 0.5;
            border-radius: 11px;
        }

        .duo p {
            position: absolute;
            top: 3px;
            left: 8px;
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .duo img {
            position: absolute;
            top: 5px;
            left: 79px;
            width: 6px;
            height: 10px;
        }

        .foot {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 210px;
            margin-top: 10px;
            background-color: #F4F4F4;
        }

        .foot img {
            width: 100%;
            height: 136px;
        }

        .foot p {
            font-size: 12px;
            font-family: PingFang;
            font-weight: 500;
            margin-top: 17px;
            color: rgba(144, 144, 144, 1);
        }

        .foot div {
            width: 109px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            border: 1px solid rgba(50, 177, 108, 1);
            border-radius: 11px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            margin-top: 10px;
            color: rgba(50, 177, 108, 1);
        }

        .dibu {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 45px;
            width: 100%;
            background-color: white;
        }

        .dibu div {
            text-align: center;
        }

        .dibu img {
            width: 17px;
            height: 18px;
        }

        .dibu p {
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(187, 187, 187, 1);
            margin-top: 5px;
        }

        .dibu .green {
            color: rgba(50, 177, 108, 1);
        }
</style>
